// 路由守卫 + 权限控制
import router from '@/router' // 导入router
import store from '@/store' // 导入vuex
import nprogress from 'nprogress' // 导入跳转加载进度条
import 'nprogress/nprogress.css' // 导入进度条样式

// 导入动态路由表
import { asyncRoutes } from '@/router'

// 白名单
const whiteList = ['/login', '/404']

// 路由全局前置守卫 -> 跳转前
router.beforeEach(async(to, from, next) => {
  // 跳转前开启进度条
  nprogress.start()

  // 从vuex中取出token
  const { token } = store.state.user
  if (token) { // 已登录
    if (to.path === '/login') { // 还要去登录
      next('/') // 导航到首页 (凡是没有放行的,都需要手动关闭进度条)
      // 跳转后关闭进度条
      nprogress.done()
    } else {
      try {
        // 优化代码: 防止每次的路由跳转都发送这个请求.因此做个条件判断
        if (!store.state.user.userInfo.userId) {
          // 1. 调用vuex中的action函数获取用户信息
          const userInfo = await store.dispatch('user/getUserInfoAction')
          // 2. 根据角色的菜单权限开放响应的左侧菜单
          // 2.1 拿到menus数组,menus包含当前用户拥有的菜单权限
          const { menus } = userInfo.roles
          // 2.2 基于menus筛选动态路由表
          const filterAsyncRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
          // console.log(555, filterAsyncRoutes)
          // 2.3 调用router.addRoutes()追加新的路由规则(这样才可以访问)
          router.addRoutes([
            ...filterAsyncRoutes,
            {
              path: '*',
              redirect: '/404',
              hidden: true
            }
          ])
          // 2.4 调用user模块setRoutes()追加到vuex中
          store.commit('user/setRoutes', filterAsyncRoutes)
          // 2.5 重新进入一次 - 避免页面刷新后白屏
          // next(to.path)
          // 推荐的写法
          next({
            // 保留to原有的所有属性
            ...to,
            // 替换上一次的路由历史记录
            replace: true
          })
          // 问题: 菜单中有路由页面能访问,因为调用了addRoutes(),但是左侧菜单名称并没有相应的
          //       同步,原因是左侧菜单获取的数据是 this.$router.option.routes, 这个数据不是
          //       是响应式的,所以就算调用了addRoutes(),这个数据并没有变,渲染的仍然是静态路由表.
        } else {
          // 3. 放行
          next()// 放行.(放行就会触发路由全局后置守卫,不需要自己手动关闭进度条)
        }
      // eslint-disable-next-line no-empty
      } catch (error) {

      }
    }
  } else { // 未登录
    if (whiteList.includes(to.path)) { // 判断访问的是不是在白名单中
      next() // 如果在就放行(放行就会触发路由全局后置守卫,不需要自己手动关闭进度条)
    } else { // 不在白名单就跳转至登录页
      // 先去登录,并携带回跳地址
      next(`/login?redirectUrl=${to.fullPath}`)
      // 跳转后关闭进度条
      nprogress.done()
    }
  }
})

// 路由全局后置守卫 -> 跳转后  (只有两个参数 to from 没有next)
router.afterEach((to, from) => {
  // 跳转后关闭进度条
  nprogress.done()
})
